<template>
  <div
    style="width: 100%; position: relative; height: 30px; padding: 20px 0 0 0"
  >
    <el-input
      placeholder="Please input Organism name"
      v-model="organismName"
      clearable
      @clear="inputSearchClear"
      style="width: 300px; position: absolute; right: 0"
    >
      <template #append>
        <el-button :icon="Search" @click="inputSearch" /> </template
    ></el-input>
  </div>
  <div class="outerBox">
    <div class="left">
      <div class="rowItem">
        <div class="box">
          <div class="contentBox">
            <el-card style="max-width: 480px">
              <template #header>
                <div class="card-header">
                  <span>Microbe</span>
                </div>
              </template>
              <ul>
                <li
                  style="cursor: pointer"
                  @click="changeMicrobe(item.value, 'Microbe')"
                  v-for="item in microbeList"
                  :key="item.label"
                  :class="{ active: searchState.type == item.value }"
                >
                  <div>{{ item.label }}</div>
                  <div class="numStyle">{{ item.num }}</div>
                </li>
              </ul>
            </el-card>
            <el-card style="max-width: 480px">
              <template #header>
                <div class="card-header">
                  <span>Kingdoms</span>
                </div>
              </template>
              <ul>
                <li
                  style="cursor: pointer"
                  @click="changeKingdoms(item.name)"
                  v-for="item in selectOptions.kingdoms"
                  :key="item"
                  :class="{ active: searchState.kingdoms == item.name }"
                >
                  <div>{{ item.name }}</div>
                  <div class="numStyle">{{ item.records }}</div>
                </li>
                <el-pagination
                  size="small"
                  v-if="itemTotal.kingdomsTotal > 0"
                  :pageSize="searchState.pageSize"
                  @change="changPage('kingdoms', $event)"
                  background
                  layout="prev, pager, next"
                  :total="itemTotal.kingdomsTotal"
                  class="mt-4"
                />
              </ul>
            </el-card>
            <el-card style="max-width: 480px">
              <template #header>
                <div class="card-header">
                  <span>Phylum</span>
                </div>
              </template>
              <ul v-loading="fLoading">
                <li
                  v-for="item in selectOptions.phylum"
                  :key="item"
                  style="cursor: pointer"
                  @click="changePhylum(item.name)"
                  :class="{ active: searchState.phylum == item.name }"
                >
                  <div>{{ item.name }}</div>
                  <div class="numStyle">{{ item.records }}</div>
                </li>
                <el-pagination
                  v-if="itemTotal.phylumTotal > 0"
                  size="small"
                  :pageSize="searchState.pageSize"
                  @change="changPage('Phylum', $event)"
                  background
                  layout="prev, pager, next"
                  :total="itemTotal.phylumTotal"
                  class="mt-4"
                />
              </ul>
            </el-card>
            <el-card style="max-width: 480px">
              <template #header>
                <div class="card-header">
                  <span>Class</span>
                </div>
              </template>
              <ul v-loading="gLoading">
                <li
                  v-for="item in selectOptions.class"
                  @click="changeClass(item.name)"
                  :key="item"
                  style="cursor: pointer"
                  :class="{ active: searchState.class == item.name }"
                >
                  <div>{{ item.name }}</div>
                  <div class="numStyle">{{ item.records }}</div>
                </li>
                <el-pagination
                  size="small"
                  v-if="itemTotal.classTotal > 0"
                  :pageSize="searchState.pageSize"
                  @change="changPage('class', $event)"
                  background
                  layout="prev, pager, next"
                  :total="itemTotal.classTotal"
                  class="mt-4"
                />
              </ul>
            </el-card>
            <el-card style="max-width: 480px">
              <template #header>
                <div class="card-header">
                  <span>Order</span>
                </div>
              </template>
              <ul v-loading="gLoading">
                <li
                  v-for="item in selectOptions.order"
                  @click="changeOrder(item.name)"
                  :key="item"
                  style="cursor: pointer"
                  :class="{ active: searchState.order == item.name }"
                >
                  <div>{{ item.name }}</div>
                  <div class="numStyle">{{ item.records }}</div>
                </li>
                <el-pagination
                  size="small"
                  v-if="itemTotal.orderTotal > 0"
                  :pageSize="searchState.pageSize"
                  @change="changPage('gigaorder', $event)"
                  background
                  layout="prev, pager, next"
                  :total="itemTotal.orderTotal"
                  class="mt-4"
                />
              </ul>
            </el-card>
            <el-card style="max-width: 480px">
              <template #header>
                <div class="card-header">
                  <span>Family</span>
                </div>
              </template>
              <ul v-loading="gLoading">
                <li
                  v-for="item in selectOptions.family"
                  @click="changeFamily(item.name)"
                  :key="item"
                  style="cursor: pointer"
                  :class="{ active: searchState.family == item.name }"
                >
                  <div>{{ item.name }}</div>
                  <div class="numStyle">{{ item.records }}</div>
                </li>
                <el-pagination
                  size="small"
                  v-if="itemTotal.familyTotal > 0"
                  :pageSize="searchState.pageSize"
                  @change="changPage('family', $event)"
                  background
                  layout="prev, pager, next"
                  :total="itemTotal.familyTotal"
                  class="mt-4"
                />
              </ul>
            </el-card>
            <el-card style="max-width: 480px">
              <template #header>
                <div class="card-header">
                  <span>Genus</span>
                </div>
              </template>
              <ul v-loading="gLoading">
                <li
                  v-for="item in selectOptions.genus"
                  @click="changeGenus(item.name)"
                  :key="item"
                  style="cursor: pointer"
                  :class="{ active: searchState.genus == item.name }"
                >
                  <div>{{ item.name }}</div>
                  <div class="numStyle">{{ item.records }}</div>
                </li>
                <el-pagination
                  size="small"
                  v-if="itemTotal.genusTotal > 0"
                  :pageSize="searchState.pageSize"
                  @change="changPage('genus', $event)"
                  background
                  layout="prev, pager, next"
                  :total="itemTotal.genusTotal"
                  class="mt-4"
                />
              </ul>
            </el-card>
            <el-card style="max-width: 480px; margin-bottom: 20px">
              <template #header>
                <div class="card-header">
                  <span>Species</span>
                </div>
              </template>
              <ul v-loading="gLoading">
                <li
                  v-for="item in selectOptions.species"
                  @click="changeSpecies(item.name)"
                  :key="item"
                  style="cursor: pointer"
                  :class="{ active: searchState.species == item.name }"
                >
                  <div>{{ item.name }}</div>
                  <div class="numStyle">{{ item.records }}</div>
                </li>
                <el-pagination
                  size="small"
                  v-if="itemTotal.speciesTotal > 0"
                  :pageSize="searchState.pageSize"
                  @change="changPage('species', $event)"
                  background
                  layout="prev, pager, next"
                  :total="itemTotal.speciesTotal"
                  class="mt-4"
                />
              </ul>
            </el-card>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 20px; width: 76%">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        header-row-class-name="tableHeader"
        stripe
        style="
          width: 100%;
          font-size: 17px;
          box-shadow: 2px 2px 4px 2px #d7d7d7;
        "
      >
        <el-table-column prop="id" sortable label="PrimerID" width="235">
          <template #default="scope">
            <a
              style="color: #0c4270 !important"
              href="#"
              @click="toSearch(scope.row)"
              >{{ scope.row.id }}</a
            >
          </template>
        </el-table-column>
        <!-- <el-table-column sortable prop="GENE_ID" label="GeneID" width="190" /> -->
        <el-table-column
          sortable
          prop="SCORE"
          label="Score"
          :sort-method="
            (a, b) => {
              return a.SCORE - b.SCORE;
            }
          "
          width="100"
        >
          <template #default="scope">
            {{ processData(scope.row?.SCORE) }}
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="ORGANISM_NAME"
          label="Organism name"
          width="290"
        >
          <template #default="scope">
            <a
              style="color: #0c4270 !important"
              target="_blank"
              :href="`https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=${scope.row.TAXID}`"
              >{{ scope.row.ORGANISM_NAME }}</a
            >
          </template>
        </el-table-column>
        <el-table-column sortable prop="STRAIN" label="Strain" width="100" />
        <el-table-column sortable prop="SPECIES" label="Species" width="190">
          <template #default="scope">
            <a
              style="color: #0c4270"
              target="_blank"
              :href="`https://www.ncbi.nlm.nih.gov/taxonomy/?term=${scope.row.SPECIES}`"
              >{{ scope.row.SPECIES }}</a
            >
          </template>
        </el-table-column>
        <el-table-column sortable prop="GENES" label="Genus" width="135">
          <template #default="scope">
            <a
              style="color: #0c4270"
              target="_blank"
              :href="`https://www.ncbi.nlm.nih.gov/taxonomy/?term=${scope.row.GENES}`"
              >{{ scope.row.GENES }}</a
            >
          </template>
        </el-table-column>
        <el-table-column sortable prop="FAMILY" label="Family" width="120">
          <template #default="scope">
            <a
              style="color: #0c4270"
              target="_blank"
              :href="`https://www.ncbi.nlm.nih.gov/taxonomy/?term=${scope.row.FAMILY}`"
              >{{ scope.row.FAMILY }}</a
            >
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="TAXID"
          label="Taxid"
          :sort-method="
            (a, b) => {
              return a.TAXID - b.TAXID;
            }
          "
          width="100"
        >
          <template #default="scope">
            <a
              style="color: #0c4270 !important"
              target="_blank"
              :href="`https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=${scope.row.TAXID}`"
              >{{ scope.row.TAXID }}</a
            >
          </template>
        </el-table-column>
        <el-table-column sortable prop="GENOME_ID" label="Assembly" width="180">
          <template #default="scope">
            <a
              style="color: #0c4270 !important"
              target="_blank"
              :href="`https://www.ncbi.nlm.nih.gov/datasets/genome/${scope.row.GENOME_ID}/`"
              >{{ processData(scope.row.GENOME_ID) }}</a
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          v-model:current-page="pageState.page"
          v-model:page-size="pageState.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="->,sizes, prev, pager, next"
          :total="total"
          style="margin-bottom: 10px"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </div>
    </div>
  </div>
  <!-- info弹窗 -->
  <el-dialog
    v-model="infoModal"
    width="70%"
    style="margin-top: 20px !important"
  >
    <SearchInfoData
      :infoRow="searchState"
      :type="searchState.type"
      :id="searchState.id"
    />
  </el-dialog>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import {
  getGeneData,
  getGeneDataPhylum,
  getGeneDataClass,
  getGeneDataOrder,
  getGeneDataSearch,
  getGeneDataFamily,
  getGeneDataGenus,
  getGeneDataSpecies,
} from "@/api/search.js";
import SearchInfoData from "@/components/SearchInfoData.vue";
import { ref, onMounted, nextTick } from "vue";
import { processData } from "@/utils/common.js";
import { geneBrowserData } from "@/api/jbrowseTable.js";
import { dataBrowseSearch } from "@/api/search.js";
const microbeList = ref([
  { label: "Bacteria", value: "bacteria", num: 33044877 },
  { label: "Viruses", value: "viruses", num: 633985 },
  { label: "Fungi", value: "fungi", num: 15949 },
]);
const familyList = ref([]);
const gLoading = ref(false);
const fLoading = ref(false);
const loading = ref(false); //加载状态
const tableLoading = ref(false);
const genusList = ref([]);
const searchState = ref({
  type: "bacteria",
  pageSize: 5,
  page: 1,
});
const rowStyle = () => {
  // 根据内容计算行高
  let baseHeight = 50; // 基础高度
  let contentHeight = Math.ceil(30 / 30) * 30; // 假设每30个字符增加20px
  if (pageState.value.pageSize == 10) {
    baseHeight = 100;
    // 根据内容计算行高
    contentHeight = Math.ceil(60 / 30) * 20; // 假设每30个字符增加20px
  }
  return {
    height: `${baseHeight + contentHeight}px`,
    "line-height": "1.5",
  };
};
// 分页配置
const pageState = ref({
  page: 1,
  pageSize: 10,
});
const itemTotal = ref({
  kingdomsTotal: 0,
  phylumTotal: 0,
});
// 所有选择器数据
const selectOptions = ref({
  kingdoms: {},
});
const fiamilyList = ref([]);
// 左侧列表条数
const typeTotal = ref();
const familyTotal = ref();
const genusTotal = ref();
const infoModal = ref(false);
const total = ref(0);
const tableData = ref([]);
const organismName = ref("");
onMounted(() => {
  localStorage.setItem("searchType", "bacteria"); // 默认选择bacteria
  // changeMicrobe("bacteria"); // 当没有选择的时候默认选择bacteria
  init();
});
// 数据初始化
const init = async () => {
  const searchData = {
    type: "bacteria",
    pageSize: 5,
    page: 1,
  };
  let geneData = await getGeneData(searchData);
  loading.value = false;
  itemTotal.value.kingdomsTotal = geneData.data.count;
  selectOptions.value.kingdoms = geneData.data.data;
  searchState.value.kingdoms = geneData.data.data[0].name;
  // --获取phylum
  let phylumData = await getGeneDataPhylum({
    ...searchData,
    kingdoms: geneData.data.data[0].name,
  });
  itemTotal.value.phylumTotal = phylumData.data.count;
  selectOptions.value.phylum = phylumData.data.data;
  // searchState.value.phylum = phylumData.data.data[0].name;
  // // --获取Class
  // let classData = await getGeneDataClass({
  //   ...searchData,
  //   kingdoms: geneData.data.data[0].name,
  //   phylum: phylumData.data.data[0].name,
  // });
  // itemTotal.value.classTotal = classData.data.count;
  // selectOptions.value.class = classData.data.data;
  // searchState.value.class = classData.data.data[0].name;
  // // --获取Order
  // let orderData = await getGeneDataOrder({
  //   ...searchData,
  //   kingdoms: geneData.data.data[0].name,
  //   phylum: phylumData.data.data[0].name,
  //   class: classData.data.data[0].name,
  // });
  // itemTotal.value.orderTotal = orderData.data.count;
  // selectOptions.value.order = orderData.data.data;
  // searchState.value.order = orderData.data.data[0].name;
  // // --获取Family
  // let familyData = await getGeneDataFamily({
  //   ...searchData,
  //   kingdoms: geneData.data.data[0].name,
  //   phylum: phylumData.data.data[0].name,
  //   class: classData.data.data[0].name,
  //   order: orderData.data.data[0].name,
  // });
  // itemTotal.value.familyTotal = familyData.data.count;
  // selectOptions.value.family = familyData.data.data;
  // searchState.value.family = familyData.data.data[0].name;
  // // --获取Genus
  // let genusData = await getGeneDataFamily({
  //   ...searchData,
  //   kingdoms: geneData.data.data[0].name,
  //   phylum: phylumData.data.data[0].name,
  //   class: classData.data.data[0].name,
  //   order: orderData.data.data[0].name,
  //   family: familyData.data.data[0].name,
  // });
  // itemTotal.value.genusTotal = genusData.data.count;
  // selectOptions.value.genus = genusData.data.data;
  // searchState.value.genus = genusData.data.data[0].name;
  // // --获取Species
  // let speciesData = await getGeneDataFamily({
  //   ...searchData,
  //   kingdoms: geneData.data.data[0].name,
  //   phylum: phylumData.data.data[0].name,
  //   class: classData.data.data[0].name,
  //   order: orderData.data.data[0].name,
  //   family: familyData.data.data[0].name,
  //   genus: genusData.data.data[0].name,
  // });
  // itemTotal.value.speciesTotal = speciesData.data.count;
  // selectOptions.value.species = speciesData.data.data;
  // searchState.value.species = speciesData.data.data[0].name;
  search();
};
const inputSearch = () => {
  let params = {
    type: searchState.value.type,
    pageSize: 2,
    page: 2,
    organismName: organismName.value,
  };
  dataBrowseSearch(params).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.count;
  });
};
const inputSearchClear = () => {
  search();
};
// 获取界的数据
const getKingdoms = (text) => {
  loading.value = true;
  getGeneData(searchState.value).then(async (res) => {
    loading.value = false;
    itemTotal.value.kingdomsTotal = res.data.count;
    selectOptions.value.kingdoms = res.data.data;
    if (text) {
      searchState.value.kingdoms = res.data.data[0].name;

      // --获取phylum
      const data = await getGeneDataPhylum({
        ...searchState.value,
        kingdoms: searchState.value.kingdoms,
      });
      itemTotal.value.phylumTotal = data.data.count;
      selectOptions.value.phylum = data.data.data;
      search();
    }
  });
};
// 根据界获取门分类
const getPhylum = async (val) => {
  loading.value = true;
  let res = await getGeneDataPhylum(searchState.value);
  // 不为空的时候
  if (res.data.count > 0) {
    loading.value = false;
    itemTotal.value.phylumTotal = res.data.count;
    selectOptions.value.phylum = res.data.data;
  }
};
// 根据门获取纲分类
const getClass = () => {
  loading.value = true;
  getGeneDataClass(searchState.value).then((res) => {
    loading.value = false;
    itemTotal.value.classTotal = res.data.count;
    selectOptions.value.class = res.data.data;
  });
};
// 根据门获取纲分类
const getGigaorder = () => {
  loading.value = true;
  getGeneDataOrder(searchState.value).then((res) => {
    loading.value = false;
    itemTotal.value.orderTotal = res.data.count;
    selectOptions.value.order = res.data.data;
  });
};
// 根据目获取科分类
const getFamily = () => {
  loading.value = true;
  getGeneDataFamily(searchState.value).then((res) => {
    loading.value = false;
    itemTotal.value.familyTotal = res.data.count;
    selectOptions.value.family = res.data.data;
  });
};
// 根据科获取属信息
const getGenus = () => {
  loading.value = true;
  getGeneDataGenus(searchState.value).then((res) => {
    loading.value = false;
    itemTotal.value.genusTotal = res.data.count;
    selectOptions.value.genus = res.data.data;
  });
};
// 根据属获取种信息
const getSpecies = () => {
  loading.value = true;
  getGeneDataSpecies(searchState.value).then((res) => {
    loading.value = false;
    itemTotal.value.speciesTotal = res.data.count;
    selectOptions.value.species = res.data.data;
    if (!tableData.value || tableData.value.length == 0) {
      searchState.value.species = res.data.data[0].name;
      search();
    }
  });
};
// 选择三大类
const changeMicrobe = async (val, type) => {
  localStorage.setItem("searchType", val);
  // 根据条件查询界并清空已选中的界
  searchState.value.type = val;
  searchState.value.kingdoms = "";
  total.value = 0;
  tableData.value = [];
  getKingdoms(1);
  delete searchState.value.kingdoms;
  delete searchState.value.phylum;
  delete searchState.value.class;
  delete searchState.value.order;
  delete searchState.value.family;
  delete searchState.value.genus;
  delete searchState.value.species;
  // ----
  delete selectOptions.value.phylum;
  delete selectOptions.value.class;
  delete selectOptions.value.order;
  delete selectOptions.value.family;
  delete selectOptions.value.genus;
  delete selectOptions.value.species;
  // ----
  itemTotal.value.phylumTotal = 0;
  itemTotal.value.classTotal = 0;
  itemTotal.value.orderTotal = 0;
  itemTotal.value.familyTotal = 0;
  itemTotal.value.genusTotal = 0;
  itemTotal.value.speciesTotal = 0;
  // let params = { type: val, order: "NAN" };
  // getGeneDataFamily(params).then((res) => {
  //   fiamilyList.value = res.data.data;
  //   fLoading.value = false;
  // });
};
// 选择Kingdom
const changeKingdoms = (val) => {
  if (searchState.value.kingdoms) {
    delete searchState.value.phylum;
    delete searchState.value.class;
    delete searchState.value.order;
    delete searchState.value.family;
    delete searchState.value.genus;
    delete searchState.value.species;
    selectOptions.value.phylum = [];
    selectOptions.value.class = [];
    selectOptions.value.order = [];
    selectOptions.value.family = [];
    selectOptions.value.genus = [];
    selectOptions.value.species = [];
    itemTotal.value.phylumTotal = 0;
    itemTotal.value.classTotal = 0;
    itemTotal.value.orderTotal = 0;
    itemTotal.value.familyTotal = 0;
    itemTotal.value.genusTotal = 0;
    itemTotal.value.speciesTotal = 0;
  }
  // 根据条件查询界并清空已选中的界
  searchState.value.kingdoms = val;
  getPhylum();
  search();
};
// 选择Phylum
const changePhylum = (val) => {
  if (searchState.value.phylum) {
    delete searchState.value.order;
    delete searchState.value.family;
    delete searchState.value.genus;
    delete searchState.value.species;
    selectOptions.value.order = [];
    selectOptions.value.family = [];
    selectOptions.value.genus = [];
    selectOptions.value.species = [];
    itemTotal.value.orderTotal = 0;
    itemTotal.value.familyTotal = 0;
    itemTotal.value.genusTotal = 0;
    itemTotal.value.speciesTotal = 0;
  }
  searchState.value.phylum = val;
  searchState.value.class = "";
  getClass();
  search();
};
// 选择Class
const changeClass = (val) => {
  if (searchState.value.class) {
    delete searchState.value.family;
    delete searchState.value.genus;
    delete searchState.value.species;
    selectOptions.value.family = [];
    selectOptions.value.genus = [];
    selectOptions.value.species = [];
    itemTotal.value.familyTotal = 0;
    itemTotal.value.genusTotal = 0;
    itemTotal.value.speciesTotal = 0;
  }
  searchState.value.class = val;
  searchState.value.order = "";
  getGigaorder();
  search();
};
// 选择Gigaorder
const changeOrder = (val) => {
  if (searchState.value.order) {
    delete searchState.value.genus;
    delete searchState.value.species;
    selectOptions.value.genus = [];
    selectOptions.value.species = [];
    itemTotal.value.genusTotal = 0;
    itemTotal.value.speciesTotal = 0;
  }
  searchState.value.order = val;

  getFamily();
  searchState.value.family = "";
  search();
};
// 选择Family
const changeFamily = (val) => {
  if (searchState.value.family) {
    delete searchState.value.species;
    selectOptions.value.species = [];
    itemTotal.value.speciesTotal = 0;
  }
  searchState.value.family = val;
  getGenus();
  search();
};
// 选择Genus
const changeGenus = (val) => {
  searchState.value.genus = val;
  searchState.value.species = "";
  getSpecies();
  search();
};
// 选择Species
const changeSpecies = (val) => {
  searchState.value.species = val;
  search();
};
// 获取数据
const search = (type) => {
  tableLoading.value = true;
  getGeneDataSearch({
    ...searchState.value,
    ...pageState.value,
  }).then((res) => {
    console.log("ressss", res);
    if (
      searchState.value.type &&
      !searchState.value.family &&
      !searchState.value.genus
    ) {
      typeTotal.value = res.data.count;
    }
    if (
      searchState.value.family &&
      searchState.value.type &&
      !searchState.value.genus
    ) {
      familyTotal.value = res.data.count;
    }
    if (
      searchState.value.genus &&
      searchState.value.type &&
      searchState.value.family
    ) {
      genusTotal.value = res.data.count;
    }
    tableData.value = res.data.data;
    total.value = res.data.count;
    tableLoading.value = false;
  });
};
// 改变页面查询数量
const changePageSize = () => {
  pageState.value.page = 1;
  search();
};
// 改变页数
const changePage = (val) => {
  searchState.value.page = val;
  search();
};
// 跳转到search页面并且对应相应锚点位置
const toSearch = (row) => {
  searchState.value.GeneID = row.GENE_ID;
  searchState.value.id = row.id;
  // 打开弹窗
  infoModal.value = true;
};
const changPage = (type, val) => {
  searchState.value.page = val;
  switch (type) {
    case "kingdoms":
      getKingdoms();
      break;
    case "Phylum":
      getPhylum();
      break;
    case "class":
      getClass();
      break;
    case "gigaorder":
      getGigaorder();
      break;
    case "family":
      getFamily();
      break;
    case "genus":
      getGenus();
      break;
    case "species":
      getSpecies();
      break;
    default:
      break;
  }
};
</script>
<style scoped lang="scss">
.outerBox {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 20px;
}

.left {
  width: 23%;
}

.right {
  width: 76%;
  box-shadow: 2px 2px 4px 2px #d7d7d7;
}

.headerTitle {
  font-size: 30px;
}

ul {
  margin-top: 20px;
}

::v-deep .el-table__header {
  height: 60px !important;
}

ul li {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
}

li:hover {
  border-bottom: 1px solid #4c7ce4;
}

::v-deep .scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.active {
  border-bottom: 1px solid #1469b3;
}

ul li {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}

::v-deep .el-card__body {
  padding: 0 15px;
  font-size: 15px;
}

.el-pagination {
  margin-top: 20px;
}

::v-deep .el-card__header {
  padding: 8px;
  background-color: #0c4270 !important;
  color: #fff;
  font-weight: bold;
}

::v-deep .el-pager li.is-active {
  background: #0c4270 !important;
}

::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: #eff5fa;
}

::v-deep .el-table__header th {
  background-color: #0c4270 !important;
  color: #fff;
}

::v-deep .el-pager li.is-active,
.el-pager li {
  color: #fff !important;
}

::v-deep .el-select-dropdown__item.is-selected {
  background-color: rgb(0, 55, 100) !important;
  color: red !important;
}

::v-deep .card-header {
  span {
    font-size: 20px !important;
  }
}

::v-deep .el-card__body {
  ul {
    li {
      font-size: 18px !important;
      line-height: 30px !important;
    }
  }
}

.numStyle {
  color: #696969;
  font-size: 16px;
}

.contentBox {
  text-align: left;

  .card-header {
    text-align: center;
  }
}
</style>
